﻿<!DOCTYPE html>

<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>图片点击扩展</title>

    <style>
        #imageContainer {
            position: relative;
            display: inline-block;
        }

        #uploadedImage {
            width: 100%;
            height: auto;
        }

        .leftDiv {
        }
    </style>



</head>
<body>
    <div class="leftDiv">
        <p id="desc"></p>
    </div>
    <div id="imageContainer">
        <img src="~/Content/images/pic.jpg" id="image" />
    </div>

    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
            $(document).ready(function () {
                $("#image").click(function (event) {
                    var offset = $(this).offset();
                    var x = event.pageX - offset.left;
                    var y = event.pageY - offset.top;

                    var desc = document.getElementById("desc");
                    //发送点击坐标到后台
                    $.ajax({
                        url: "/Home/ProcessClick",
                        data: { x: x, y: y, imagePath: "pic.jpg" },
                        type: "POST",
                        success: function (data) {
                            console.log("data：", data);
                            var expanded = data.expandedArea;

                            var html = "";
                            html += "点击点坐标：(" + data.x + "," + data.y + ")\r\n"
                            html += "左上角坐标：(" + expanded.topLeft.X + "," + expanded.topLeft.Y + ")\r\n";
                            html += "右下角坐标：(" + expanded.bottomRight.X + "," + expanded.bottomRight.Y + ")\r\n";
                            html += "空白区域面积：" + expanded.pixelCount;

                            desc.innerHTML = html;
                        },
                        error: function (err) {

                        }
                    });


                    //var xhr = new XMLHttpRequest();
                    //xhr.open("POST")
                })
            });
    </script>

</body>
</html>
